<template>
  <div id="editor"></div>
</template>

<script>
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import E from 'wangeditor'
// import { uploadImg } from '@/api/axios'
import { uploadImg } from '@/api/axios'

export default defineComponent({
  name: 'Editor',
  emits: {
    publishContent: (value) => {
      if (typeof value === 'string') {
        return true
      } else {
        return false
      }
    }
  },
  setup (props, { emit }) {
    const editor = ref('#editor')
    let instance
    onMounted(() => {
      instance = new E(editor.value)
      Object.assign(instance.config, {
        onchange () {
          console.log('change')
        }
      })
      instance.config.zIndex = 1
      // instance.config.customUploadImg = function (resultFiles, insertImgFn) {
      //   // resultFiles 是 input 中选中的文件列表
      //   // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      //   console.log(resultFiles)
      //   // 上传图片，返回结果，将图片插入到编辑器中
      //   // insertImgFn(imgUrl)
      // }

      instance.config.customUploadImg = async (resultFiles, insertImgFn) => {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        const uploadedFile = resultFiles[0]
        const formData = new FormData()
        formData.append('file', uploadedFile)

        const reply = await uploadImg('/upload', formData)
        if (reply.data.code !== 0) {
          return
        }
        // 上传图片，返回结果，将图片插入到编辑器中
        insertImgFn(reply.data.data.url)
      }
      instance.config.onchange = (html) => {
        emit('publishContent', html)
      }
      instance.create()
    })
    onUnmounted(() => {
      instance.destroy()
    })
    return {
      editor
    }
  }
})
</script>

<style scoped>

</style>
